<template>
  <div v-show="!!scene">
    <el-form inline>
      <el-form-item label="属性名称">
        <el-input v-model="attrValueObj.attrName"></el-input>
      </el-form-item>
    </el-form>
    <div>
      <el-button
        type="primary"
        icon="Plus"
        @click="addAttrValue"
        :disabled="!attrValueObj.attrName"
      >
        添加属性值
      </el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    <el-table :data="attrValueObj.attrValueList" border style="margin: 15px 0" :height="tableHeight">
      <el-table-column
        label="序号"
        type="index"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column label="属性值名称" prop="valueName">
        <template #="{ row, $index }">
          <el-input
            v-model.trim="row.valueName"
            size="small"
            v-if="row.flag"
            @blur="handleBlur(row, $index)"
            :ref="(el: any) => (inputList[$index] = el)"
          ></el-input>
          <div v-else @click="handleClick(row, $index)">
            {{ row.valueName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px" align="center">
        <template #="{ $index }">
          <el-button
            type="danger"
            icon="Delete"
            size="small"
            @click="removeValueName($index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-button
        type="primary"
        @click="save"
        :disabled="!attrValueObj.attrValueList.length"
      >
        保存
      </el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, watch } from 'vue'
import type { Attr, AttrValue } from '@/api/product/attr/type'
import { ElMessage } from 'element-plus'
import { reqAddOrUpdateAttr } from '@/api/product/attr'
import useCategoryStore from '@/store/modules/category'

const categoryStore = useCategoryStore()
const emit = defineEmits(['save', 'cancel'])
const props = defineProps<{
  params: Attr | undefined
  scene: number
}>()
const tableHeight = window.innerHeight - 380 + 'px'

const attrValueObj = reactive<Attr>({
  attrName: '',
  attrValueList: [],
  categoryId: 0,
  categoryLevel: 3
})
const addAttrValue = () => {
  attrValueObj.attrValueList.push({
    valueName: '',
    flag: true
  })
  nextTick(() => {
    inputList.value[attrValueObj.attrValueList.length - 1].focus()
  })
}
const removeValueName = (index: number) => {
  attrValueObj.attrValueList.splice(index, 1)
}
const handleBlur = (row: AttrValue, index: number) => {
  if (!row.valueName) {
    removeValueName(index)
    return ElMessage.error('属性值不能为空')
  }

  const repeat = attrValueObj.attrValueList.find(
    (item) => item !== row && item.valueName === row.valueName
  )
  if (repeat) {
    removeValueName(index)
    return ElMessage.error('属性值不能重复')
  }

  row.flag = false
}
const handleClick = (row: AttrValue, index: number) => {
  row.flag = true
  nextTick(() => {
    inputList.value[index].focus()
  })
}
const inputList = ref<any[]>([])
const cancel = () => {
  emit('cancel')
}
const save = async () => {
  attrValueObj.categoryId = categoryStore.category3Id
  const { code } = await reqAddOrUpdateAttr(attrValueObj)
  if (code === 200) {
    ElMessage.success('保存成功')
    emit('save')
  } else {
    ElMessage.error('保存失败')
  }
}
const reset = () => {
  inputList.value = []
  Object.assign(attrValueObj, {
    attrName: '',
    attrValueList: [],
    categoryId: 0,
    categoryLevel: 3
  })
}

watch(
  () => props.scene,
  (newVal) => {
    if (!newVal) reset()
    else if (props.params)
      Object.assign(attrValueObj, JSON.parse(JSON.stringify(props.params)))
  }
)
</script>

<style lang="scss" scoped></style>
